<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('地图')" />
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=3SHBZ-SCS6D-PYT4Y-PK36K-OC6E7-64FTO"></script>
</head>
<body class="gray-bg" onload="init()">
<div style="width:100%;height:100%">
   <form class="form-horizontal m" id="form-yecChargingPiles-edit" style="width:100%;height:100%">
        <div class="ibox float-e-margins" style="width:100%;height:100%">
            <div class="ibox-content" style="width:100%;height:100%">
                <h3><div style="float:left">搜索</div>:
                    <div style="float:right; font-size:12px" id = 'show'></div></h3>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" id="addressto">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="width:100%;height:100%">
                    <div style="width:100%;height:100%" id="container"></div>
                </div>
            </div>
            <div hidden id="lat"></div>
            <div hidden id="lng"></div>
            <div hidden id="provinceName"></div>
            <div hidden id="cityName"></div>
            <div hidden id="districtName"></div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-suggest-js" />
<th:block th:include="include :: bootstrap-typeahead-js" />
<script type="text/javascript">
    var prefix = ctx + "toolset/surface";
    var map = prefix + "/map/maptx/adress";

    var init = function() {
        //默认地图中心地址经纬度，zoom调为3，基本展示整个中国地图
        lat = 30.615485;
        lng = 114.254963;
        var center = new qq.maps.LatLng(lat, lng);
        var map = new qq.maps.Map(document.getElementById('container'), {
            center: center,
            zoom: 3
        });

        var info = new qq.maps.InfoWindow({map: map});
        geocoder = new qq.maps.Geocoder({
            complete : function(result){
                map.setCenter(result.detail.location);
                var marker = new qq.maps.Marker({
                    map:map,
                    position: result.detail.location
                });
                //添加监听事件 当标记被点击了  设置图层
                qq.maps.event.addListener(marker, 'click', function() {
                    info.open();
                    info.setContent('<div style="width:280px;height:100px;">'+
                        result.detail.address+'</div>');
                    info.setPosition(result.detail.location);
                    $("#show").text(result.detail.address+"["+result.detail.location+"]");
                });
            }
        });

        function codeLatLng() {
            var lat = parseFloat($("#lat").val());
            var lng = parseFloat($("#lng").val());
            var latLng = new qq.maps.LatLng(lat, lng);
            //调用信息窗口
            var info = new qq.maps.InfoWindow({map: map});
            //调用获取位置方法
            geocoder.getAddress(latLng);
        }

        //绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function(event) {
            /* alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +
                 event.latLng.getLng() + ']');*/
            $("#lat").val(event.latLng.getLat());
            $("#lng").val(event.latLng.getLng());
            codeLatLng();
        });


        adressBsSuggest.on('onSetSelectValue', function (e, keyword) {
            console.log(keyword.id);
            console.log(keyword.key);
            var strings = keyword.id.split("(")[1].split(")")[0].split("-");
            $("#lat").val(strings[0]);
            $("#lng").val(strings[1]);
            map.zoomTo(13);
            $("#show").text(keyword.key+"["+strings[0]+","+strings[1]+"]");
            $("#provinceName").val(keyword.id.split("(")[0].split(" ")[0]);
            $("#cityName").val(keyword.id.split("(")[0].split(" ")[1]);
            $("#districtName").val(keyword.id.split("(")[0].split(" ")[2]);
            codeLatLng();
        });

    }

    var adressBsSuggest = $("#addressto").bsSuggest({
        indexId: 1, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 0, //data.value 的第几个数据，作为input输入框的内容
        allowNoKeyword: false, //是否允许无关键字时请求数据
        multiWord: true, //以分隔符号分割的多关键字支持
        separator: ",", //多关键字支持时的分隔符，默认为空格
        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
        effectiveFieldsAlias: {
            adress: "地址",
            area: "行政区"
        },
        url: map+'?keyword=', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
            console.log(json);
            var i, len, data = {
                value: []
            };

            var jsondata = json.value.body.data

            if (!jsondata || jsondata.length == 0) {
                return false;
            }
            len = jsondata.length;

            for (i = 0; i < len; i++) {
                data.value.push({
                    "adress": jsondata[i].address+"("+jsondata[i].title+")",
                    "area": jsondata[i].province +" "+ jsondata[i].city +" "+ jsondata[i].district+"("+jsondata[i].location.lat+"-"+jsondata[i].location.lng+")",
                });
            }
            console.log(data);
            return data;
        }
    });


    function submitHandler() {
        if ($("#show").text()==null || $("#show").text() == "") {
            $.modal.msgError("请确认上方地址经纬度是否显示");
        }
        var data = $('#form-yecChargingPiles-edit').serializeArray();
        var shuju = $("#show").text()
        data.push({"name": "id", "value": id});
        data.push({"name": "address", "value": shuju.split("[")[0]});
        data.push({"name": "lat", "value": shuju.split("[")[1].split("]")[0].split(",")[0]});
        data.push({"name": "lng", "value": shuju.split("[")[1].split("]")[0].split(",")[1]});
        data.push({"name": "provinceName", "value": $("#provinceName").val()});
        data.push({"name": "cityName", "value": $("#cityName").val()});
        data.push({"name": "districtName", "value": $("#districtName").val()});
        console.log(data);
    }

</script>
</body>
</html>
